<template>
    <div>
        <div class="banner">
            <img src="@/assets/images/index/banner.jpg" alt="" srcset="">
        </div>
        <div class="content">
            <div class="title">
                <span class="title-name">就业资讯</span>
                <span class="title-englishname">EMPLOYMENT INFORMATION</span>
            </div>
            <ul>
                <li v-for="(item, index) in resources"
                    :key="index">
                    <img :src="item.thumb" alt="" srcset="">
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                resources: [{
                    thumb: require('@/assets/images/student/1.png')
                },{
                    thumb: require('@/assets/images/student/2.png')
                },{
                    thumb: require('@/assets/images/student/3.png')
                },{
                    thumb: require('@/assets/images/student/4.png')
                },{
                    thumb: require('@/assets/images/student/5.png')
                },{
                    thumb: require('@/assets/images/student/6.png')
                },{
                    thumb: require('@/assets/images/student/7.png')
                },{
                    thumb: require('@/assets/images/student/8.png')
                },{
                    thumb: require('@/assets/images/student/9.png')
                },{
                    thumb: require('@/assets/images/student/10.png')
                },{
                    thumb: require('@/assets/images/student/11.png')
                },{
                    thumb: require('@/assets/images/student/12.png')
                },{
                    thumb: require('@/assets/images/student/13.png')
                },{
                    thumb: require('@/assets/images/student/14.png')
                },{
                    thumb: require('@/assets/images/student/15.png')
                },]
            }
        }
    }
</script>

<style scoped>
    img {
        max-width: 100%;
    }

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .m-r {
        margin-right: 53px;
    }

    .m-b {
        margin-top: 38px;
    }

    .content {
        padding: 81px 0 70px 0;
        box-sizing: border-box;
    }

    .content .title .title-name {
        width: 100%;
        font-size: 40px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        display: block;
        text-align: center;
        margin-bottom: 20px;
    }

    .content .title .title-englishname {
        width: 100%;
        font-size: 20px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(0, 144, 255, 1);
        display: block;
        text-align: center;
        margin-bottom: 52px;
    }

    .content ul {
        width: 1203px;
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .content ul li{
        margin-bottom: 71px;
        font-size: 0px;
    }

    .content ul li p {
        width: 565px;
        height: 191px;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 29px;
    }

    @media screen and (max-width: 480px) {
        .m-r {
            margin-right: 0px;
        }

        .content ul {
            width: 100%;
            margin: 0;
        }

        .content ul li {
            width: 100%;
        }

        .content ul li p {
            width: 100%;
            height: 100%;
            margin-bottom: 38px;
        }
    }
</style>